<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link rel="stylesheet" href="../static/bootstrap/css/bootstrap.min.css">
  <link rel="stylesheet" href="../static/css/register.css"></link>
  <link rel="stylesheet" href="../static/layui/css/layui.css"></link>
  <script src="../static/js/jquery.min.js"></script>
  <script src="../static/bootstrap/js/bootstrap.min.js"></script>
  <script src="../static/layui/layui.js"></script>
  <script>
    $(function(){
        $("#back_btn").click(function(){
          window.location.href = '/loginIndex'
        });
        $("#register").click(function(){
          let name = $("#name").val();
          let username = $("#username").val();
          let password = $("#password").val();
          let resetpw = $("#resetpw").val();
          //参数验证
          if(name == null || name == ""){
            layer.alert('请先填写姓名！',{
            icon:5,
            title:"注册提示"
           });
           return;
          }
          if(username == null || username == ""){
           layer.alert('请先填写用户名！',{
            icon:5,
            title:"注册提示"
           });
           return;
         }
         if(password == null || password == ""){
           layer.alert('请先填写密码！',{
            icon:5,
            title:"注册提示"
           });
           return;
         }
         if(resetpw == null || resetpw == ""){
           layer.alert('请再次输入你的密码！',{
            icon:5,
            title:"注册提示"
           });
           return;
         }
         if(resetpw != password){
          layer.alert('两次密码请输入一致！',{
            icon:5,
            title:"注册提示"
           });
           return;
         }
          //保存注册用户
          var storge = window.localStorage;
          var user = storge.getItem("user");
          console.log(user);
          if(user == null){
            user = new Array();
            newUser = new Object;
            newUser.name = name;
            newUser.username = username;
            newUser.password = password;
            user[0] = newUser;
            storge.setItem("user",JSON.stringify(user));
          }else{
            var userList = JSON.parse(user);
            console.log(JSON.parse(user));
            len = userList.length;
            console.log(len);
            newUser = new Object;
            newUser.name = name;
            newUser.username = username;
            newUser.password = password;
            userList[len] = newUser;
            storge.setItem("user",JSON.stringify(userList));
           }
           layer.alert('注册成功！',{
            icon:6,
            title:"注册提示"
           });
        })
    })
  </script>
</head>
<body>
  <div class="container">
    <div class="form row">
        <form class="form-horizontal col-sm-offset col-md-offset-3">
            <h3 class="form-title">手写数字识别注册系统</h3>
                <div class="col-sm-9 col-md-9">
                      <div class="form-group">
                        <i class="fa fa-user" aria-hidden="true"></i>
                        <input class="form-control required" type="text" name="name" id="name" placeholder="请输入姓名" required>
                    </div>
                    <div class="form-group">
                        <i class="fa fa-user" aria-hidden="true"></i>
                        <input class="form-control required" type="text" name="username" id="username" placeholder="请输入用户名" required>
                    </div>
                    <div class="form-group">
                        <i class="fa fa-key" aria-hidden="true"></i>
                        <input class="form-control required" type="password" name="password" id="password" placeholder="请输入密码" required>
                    </div>
                    <div class="form-group">
                        <i class="fa fa-check-circle-o" aria-hidden="true"></i>
                        <input class="form-control required" type="password" name="resetpw" id="resetpw" placeholder="请确认密码" required>
                    </div>
                    <div class="form-group">
                    </div>
                    <div class="form-group">
                        <input type="button" value="注册" class="btn btn-success pull-right" id="register">
                        <input type="button" class="btn btn-info pull-left" id="back_btn" value="返回"/>
                    </div>


                </div>
        </form>
    </div>
</div>
</body>
</html>